<template>
  <div class="main">
    <data-table ref="dataTable" :props="dataTableProps">
      <template #params>
        <el-form-item prop="name" label="角色名称">
          <el-input v-model="dataTableProps.params.name" clearable/>
        </el-form-item>
      </template>
      <template #data="{onEdit,onDel}">
        <el-table-column prop="name" label="角色名称"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column prop="membersCount" label="成员数量"/>
        <el-table-column label="状态">
          <template slot-scope="{row}">
            <el-switch v-model="row.isDisabled" @change="setIsDisabled(row)"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="onAuth(row)">权限设置</el-button>
            <el-button type="text" @click="onEdit(row)">修改名称</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="onDel(row)">
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </data-table>

    <add-edit-dialog :visible.sync="addEditVisible" :row="addEditRow"/>
    <set-auth-dialog :visible.sync="setAuthVisible" :row="setAuthRow"/>
  </div>
</template>

<script>
  import sysRoleApi from '@/api/sysRole'
  import AddEditDialog from './components/AddEditDialog'
  import SetAuthDialog from './components/SetAuthDialog'
  import listMixin from '@/mixins/listMixin'

  export default {
    name: 'roleList',
    mixins: [listMixin],
    components: { AddEditDialog, SetAuthDialog },
    data() {
      return {
        dataTableProps: {
          params: {
            name: '',
            phone: ''
          },
          apiModule: sysRoleApi
        },

        addEditVisible: false,
        addEditRow: null,

        setAuthVisible: false,
        setAuthRow: null
      }
    },
    methods: {
      onAuth(row) {
        this.setAuthRow = row
        this.setAuthVisible = true
      },
      setIsDisabled(row) {
        sysRoleApi[row.isDisabled ? 'disable' : 'enable'](row.id).then(res => {
          this.$refs.dataTable.getDataList()
          this.$notify({
            title: '成功',
            message: `${row.isDisabled ? '禁用' : '启用'}成功`,
            type: 'success'
          })
        })
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>
